<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密钥算法管理 - 密钥管理服务</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8fafc;
            background-image: radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
            color: #334155;
        }
        .card {
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(59, 130, 246, 0.4);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
        }
        .btn {
            transition: all 0.3s ease;
            border-radius: 8px;
        }
        .btn-primary {
            background-color: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        .btn-primary:hover {
            background-color: rgba(59, 130, 246, 0.25);
        }
        .btn-success {
            background-color: rgba(34, 197, 94, 0.15);
            color: #16a34a;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }
        .btn-success:hover {
            background-color: rgba(34, 197, 94, 0.25);
        }
        .btn-warning {
            background-color: rgba(234, 179, 8, 0.15);
            color: #d97706;
            border: 1px solid rgba(234, 179, 8, 0.3);
        }
        .btn-warning:hover {
            background-color: rgba(234, 179, 8, 0.25);
        }
        .btn-danger {
            background-color: rgba(239, 68, 68, 0.15);
            color: #dc2626;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        .btn-danger:hover {
            background-color: rgba(239, 68, 68, 0.25);
        }
        .search-input {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 8px;
            padding-left: 36px;
            transition: all 0.3s ease;
        }
        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .form-control {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .table-row {
            transition: all 0.2s ease;
        }
        .table-row:hover {
            background-color: rgba(59, 130, 246, 0.05);
        }
        .back-btn {
            transition: all 0.3s ease;
        }
        .back-btn:hover {
            background-color: rgba(59, 130, 246, 0.1);
        }
        .badge-active {
            background-color: rgba(34, 197, 94, 0.15);
            color: #16a34a;
        }
        .badge-inactive {
            background-color: rgba(156, 163, 175, 0.15);
            color: #6b7280;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
    </style>
</head>
<body class="p-6">
    <!-- 背景网格层 -->
    <article class="fixed inset-0 z-0">
        <!-- 背景网格图案已在body样式中定义 -->
    </article>
    
    <!-- 主要内容层 -->
    <section class="relative z-10">
        <!-- 页面标题区 -->
        <header class="mb-6 flex items-center justify-between">
            <h1 class="text-3xl font-bold text-gray-800">密钥算法管理</h1>
            <a href="index.html" class="back-btn px-4 py-2 rounded-lg flex items-center gap-2 text-gray-600">
                <i class="fas fa-arrow-left"></i>
                <span>返回首页</span>
            </a>
        </header>
        
        <!-- 主内容区 -->
        <main class="space-y-6">
            <!-- 算法统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="card p-6 fade-in">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-sm text-gray-500">支持的算法总数</p>
                            <h3 class="text-2xl font-bold mt-1" id="totalAlgorithms">0</h3>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                            <i class="fas fa-key"></i>
                        </div>
                    </div>
                </div>
                <div class="card p-6 fade-in" style="animation-delay: 0.1s">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-sm text-gray-500">对称加密算法</p>
                            <h3 class="text-2xl font-bold mt-1" id="symmetricAlgorithms">0</h3>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fas fa-lock"></i>
                        </div>
                    </div>
                </div>
                <div class="card p-6 fade-in" style="animation-delay: 0.2s">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-sm text-gray-500">非对称加密算法</p>
                            <h3 class="text-2xl font-bold mt-1" id="asymmetricAlgorithms">0</h3>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                    </div>
                </div>
                <div class="card p-6 fade-in" style="animation-delay: 0.3s">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-sm text-gray-500">国密算法</p>
                            <h3 class="text-2xl font-bold mt-1" id="smAlgorithms">0</h3>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
                            <i class="fas fa-landmark"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 算法列表 -->
            <div class="card p-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4">
                    <h2 class="text-xl font-semibold">算法列表</h2>
                    <div class="flex items-center gap-3">
                        <div class="relative">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            <input type="text" id="algorithmSearch" class="search-input pl-10 pr-4 py-2 w-full md:w-64" placeholder="搜索算法...">
                        </div>
                        <button class="btn btn-primary px-4 py-2 flex items-center gap-2" onclick="openAlgorithmDetail('add')">
                            <i class="fas fa-plus"></i>
                            <span>添加算法</span>
                        </button>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">算法名称</th>
                                <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">类型</th>
                                <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">类别</th>
                                <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">默认密钥长度</th>
                                <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">支持的长度</th>
                                <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">状态</th>
                                <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody id="algorithmsTableBody">
                            <!-- 算法数据将通过JavaScript动态生成 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </section>
    
    <!-- 算法详情模态框 -->
    <div id="algorithmDetailModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="modal-backdrop absolute inset-0"></div>
        <div class="card relative z-10 w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold" id="modalTitle">添加算法</h3>
                <button onclick="closeAlgorithmDetailModal()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="algorithmForm" onsubmit="submitAlgorithmForm(event)">
                <input type="hidden" id="algorithmId">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">算法名称</label>
                        <input type="text" id="algorithmName" name="algorithmName" class="form-control w-full px-4 py-2" placeholder="例如: AES, SM2, RSA, SM4" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">算法类型</label>
                        <select id="algorithmType" name="algorithmType" class="form-control w-full px-4 py-2" required>
                            <option value="symmetric">对称加密</option>
                            <option value="asymmetric">非对称加密</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">算法类别</label>
                        <select id="algorithmCategory" name="algorithmCategory" class="form-control w-full px-4 py-2" required>
                            <option value="international">国际标准</option>
                            <option value="national">国密标准</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">默认密钥长度</label>
                        <input type="number" id="defaultKeyLength" name="defaultKeyLength" class="form-control w-full px-4 py-2" placeholder="例如: 128, 256, 2048" required>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">支持的密钥长度（逗号分隔）</label>
                        <input type="text" id="supportedKeyLengths" name="supportedKeyLengths" class="form-control w-full px-4 py-2" placeholder="例如: 128,192,256" required>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">算法描述</label>
                        <textarea id="algorithmDescription" name="algorithmDescription" class="form-control w-full px-4 py-2 h-24" placeholder="描述算法的用途、特性等"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select id="algorithmStatus" name="algorithmStatus" class="form-control w-full px-4 py-2" required>
                            <option value="active">启用</option>
                            <option value="inactive">禁用</option>
                        </select>
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end gap-3">
                    <button type="button" class="btn px-4 py-2 border border-gray-300" onclick="closeAlgorithmDetailModal()">取消</button>
                    <button type="submit" class="btn btn-primary px-4 py-2">保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 引入通用工具函数 -->
    <script src="common.js"></script>
    
    <script>
        // 初始化算法数据
        function initAlgorithmData() {
            try {
                if (!localStorage.getItem('algorithms')) {
                    const initialAlgorithms = [
                        { 
                            id: 'ALG-001', 
                            name: 'AES', 
                            type: 'symmetric', 
                            category: 'international', 
                            defaultLength: 256, 
                            supportedLengths: [128, 192, 256], 
                            description: '高级加密标准，广泛使用的对称加密算法', 
                            status: 'active'
                        },
                        { 
                            id: 'ALG-002', 
                            name: 'SM2', 
                            type: 'asymmetric', 
                            category: 'national', 
                            defaultLength: 256, 
                            supportedLengths: [256], 
                            description: '中国自主研发的椭圆曲线公钥密码算法', 
                            status: 'active'
                        },
                        { 
                            id: 'ALG-003', 
                            name: 'RSA', 
                            type: 'asymmetric', 
                            category: 'international', 
                            defaultLength: 2048, 
                            supportedLengths: [1024, 2048, 4096], 
                            description: '非对称加密算法，广泛用于数字签名和密钥交换', 
                            status: 'active'
                        },
                        { 
                            id: 'ALG-004', 
                            name: 'SM4', 
                            type: 'symmetric', 
                            category: 'national', 
                            defaultLength: 128, 
                            supportedLengths: [128], 
                            description: '中国自主研发的分组密码算法，用于数据加密', 
                            status: 'active'
                        },
                        { 
                            id: 'ALG-005', 
                            name: '3DES', 
                            type: 'symmetric', 
                            category: 'international', 
                            defaultLength: 168, 
                            supportedLengths: [168], 
                            description: '三重数据加密标准，DES算法的增强版', 
                            status: 'inactive'
                        }
                    ];
                    localStorage.setItem('algorithms', JSON.stringify(initialAlgorithms));
                }
            } catch (error) {
                console.error('初始化算法数据失败:', error);
                showToast('初始化数据失败', 'error');
            }
        }
        
        // 加载算法列表
        function loadAlgorithms() {
            try {
                const algorithms = JSON.parse(localStorage.getItem('algorithms') || '[]');
                const tbody = document.getElementById('algorithmsTableBody');
                tbody.innerHTML = '';
                
                if (algorithms.length === 0) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">暂无算法数据</td>
                        </tr>
                    `;
                } else {
                    algorithms.forEach(algorithm => {
                        const row = document.createElement('tr');
                        row.className = 'table-row border-b border-gray-100';
                        
                        const typeText = algorithm.type === 'symmetric' ? '对称加密' : '非对称加密';
                        const categoryText = algorithm.category === 'international' ? '国际标准' : '国密标准';
                        const statusClass = algorithm.status === 'active' ? 'badge-active' : 'badge-inactive';
                        const statusText = algorithm.status === 'active' ? '启用' : '禁用';
                        
                        row.innerHTML = `
                            <td class="py-3 px-4">${algorithm.name}</td>
                            <td class="py-3 px-4">${typeText}</td>
                            <td class="py-3 px-4">${categoryText}</td>
                            <td class="py-3 px-4">${algorithm.defaultLength}</td>
                            <td class="py-3 px-4">${algorithm.supportedLengths.join(', ')}</td>
                            <td class="py-3 px-4">
                                <span class="inline-block px-2 py-1 rounded-full text-xs font-medium ${statusClass}">${statusText}</span>
                            </td>
                            <td class="py-3 px-4">
                                <div class="flex gap-2">
                                    <button onclick="openAlgorithmDetail('edit', '${algorithm.id}')" class="text-blue-600 hover:text-blue-800 p-1 rounded-full hover:bg-blue-50 transition-colors" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button onclick="toggleAlgorithmStatus('${algorithm.id}')" class="text-gray-600 hover:text-gray-800 p-1 rounded-full hover:bg-gray-50 transition-colors" title="${algorithm.status === 'active' ? '禁用' : '启用'}">
                                        <i class="fas fa-${algorithm.status === 'active' ? 'eye-slash' : 'eye'}"></i>
                                    </button>
                                </div>
                            </td>
                        `;
                        tbody.appendChild(row);
                    });
                }
                
                // 更新统计信息
                updateAlgorithmStatistics(algorithms);
            } catch (error) {
                console.error('加载算法列表失败:', error);
                showToast('加载数据失败', 'error');
            }
        }
        
        // 更新算法统计信息
        function updateAlgorithmStatistics(algorithms) {
            const totalAlgorithms = algorithms.length;
            const symmetricAlgorithms = algorithms.filter(a => a.type === 'symmetric').length;
            const asymmetricAlgorithms = algorithms.filter(a => a.type === 'asymmetric').length;
            const smAlgorithms = algorithms.filter(a => a.category === 'national').length;
            
            document.getElementById('totalAlgorithms').textContent = totalAlgorithms;
            document.getElementById('symmetricAlgorithms').textContent = symmetricAlgorithms;
            document.getElementById('asymmetricAlgorithms').textContent = asymmetricAlgorithms;
            document.getElementById('smAlgorithms').textContent = smAlgorithms;
        }
        
        // 打开算法详情模态框
        function openAlgorithmDetail(action, algorithmId = null) {
            const modal = document.getElementById('algorithmDetailModal');
            const modalTitle = document.getElementById('modalTitle');
            const algorithmForm = document.getElementById('algorithmForm');
            
            modalTitle.textContent = action === 'add' ? '添加算法' : '编辑算法';
            
            if (action === 'add') {
                algorithmForm.reset();
                document.getElementById('algorithmId').value = '';
            } else if (action === 'edit' && algorithmId) {
                const algorithms = JSON.parse(localStorage.getItem('algorithms') || '[]');
                const algorithm = algorithms.find(a => a.id === algorithmId);
                
                if (algorithm) {
                    document.getElementById('algorithmId').value = algorithm.id;
                    document.getElementById('algorithmName').value = algorithm.name;
                    document.getElementById('algorithmType').value = algorithm.type;
                    document.getElementById('algorithmCategory').value = algorithm.category;
                    document.getElementById('defaultKeyLength').value = algorithm.defaultLength;
                    document.getElementById('supportedKeyLengths').value = algorithm.supportedLengths.join(', ');
                    document.getElementById('algorithmDescription').value = algorithm.description || '';
                    document.getElementById('algorithmStatus').value = algorithm.status;
                }
            }
            
            modal.classList.remove('hidden');
        }
        
        // 关闭算法详情模态框
        function closeAlgorithmDetailModal() {
            document.getElementById('algorithmDetailModal').classList.add('hidden');
        }
        
        // 提交算法表单
        function submitAlgorithmForm(event) {
            event.preventDefault();
            
            try {
                const algorithmId = document.getElementById('algorithmId').value;
                const name = document.getElementById('algorithmName').value.trim();
                const type = document.getElementById('algorithmType').value;
                const category = document.getElementById('algorithmCategory').value;
                const defaultLength = parseInt(document.getElementById('defaultKeyLength').value);
                const supportedLengthsStr = document.getElementById('supportedKeyLengths').value.trim();
                const description = document.getElementById('algorithmDescription').value.trim();
                const status = document.getElementById('algorithmStatus').value;
                
                // 验证输入
                if (!name) {
                    showToast('算法名称不能为空', 'error');
                    return;
                }
                
                if (isNaN(defaultLength) || defaultLength <= 0) {
                    showToast('默认密钥长度必须为正整数', 'error');
                    return;
                }
                
                // 解析支持的密钥长度
                const supportedLengths = supportedLengthsStr.split(',')
                    .map(l => parseInt(l.trim()))
                    .filter(l => !isNaN(l) && l > 0);
                
                if (supportedLengths.length === 0) {
                    showToast('请输入有效的密钥长度', 'error');
                    return;
                }
                
                const algorithms = JSON.parse(localStorage.getItem('algorithms') || '[]');
                
                if (!algorithmId) { // 添加新算法
                    const newAlgorithm = {
                        id: `ALG-${generateId('ALG')}`,
                        name: name,
                        type: type,
                        category: category,
                        defaultLength: defaultLength,
                        supportedLengths: supportedLengths,
                        description: description,
                        status: status
                    };
                    algorithms.push(newAlgorithm);
                } else { // 编辑现有算法
                    const algorithmIndex = algorithms.findIndex(a => a.id === algorithmId);
                    if (algorithmIndex !== -1) {
                        algorithms[algorithmIndex] = {
                            ...algorithms[algorithmIndex],
                            name: name,
                            type: type,
                            category: category,
                            defaultLength: defaultLength,
                            supportedLengths: supportedLengths,
                            description: description,
                            status: status
                        };
                    }
                }
                
                localStorage.setItem('algorithms', JSON.stringify(algorithms));
                
                // 模拟保存延迟
                setTimeout(() => {
                    loadAlgorithms();
                    closeAlgorithmDetailModal();
                    showToast(algorithmId ? '算法更新成功！' : '算法添加成功！', 'success');
                }, 800);
            } catch (error) {
                console.error('保存算法失败:', error);
                showToast('保存失败', 'error');
            }
        }
        
        // 切换算法状态
        function toggleAlgorithmStatus(algorithmId) {
            try {
                const algorithms = JSON.parse(localStorage.getItem('algorithms') || '[]');
                const algorithmIndex = algorithms.findIndex(a => a.id === algorithmId);
                
                if (algorithmIndex !== -1) {
                    const currentStatus = algorithms[algorithmIndex].status;
                    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
                    
                    // 模拟状态更新延迟
                    showLoading();
                    
                    setTimeout(() => {
                        algorithms[algorithmIndex].status = newStatus;
                        localStorage.setItem('algorithms', JSON.stringify(algorithms));
                        loadAlgorithms();
                        hideLoading();
                        showToast(`算法已${newStatus === 'active' ? '启用' : '禁用'}！`, 'success');
                    }, 800);
                }
            } catch (error) {
                console.error('切换算法状态失败:', error);
                hideLoading();
                showToast('操作失败', 'error');
            }
        }
        
        // 设置搜索功能
        function setupSearch() {
            const searchInput = document.getElementById('algorithmSearch');
            
            searchInput.addEventListener('input', () => {
                const searchTerm = searchInput.value.toLowerCase();
                const algorithms = JSON.parse(localStorage.getItem('algorithms') || '[]');
                const filteredAlgorithms = algorithms.filter(algorithm => 
                    algorithm.name.toLowerCase().includes(searchTerm) ||
                    (algorithm.description && algorithm.description.toLowerCase().includes(searchTerm))
                );
                
                // 重新渲染表格
                const tbody = document.getElementById('algorithmsTableBody');
                tbody.innerHTML = '';
                
                if (filteredAlgorithms.length === 0) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">没有找到匹配的算法</td>
                        </tr>
                    `;
                } else {
                    filteredAlgorithms.forEach(algorithm => {
                        const row = document.createElement('tr');
                        row.className = 'table-row border-b border-gray-100';
                        
                        const typeText = algorithm.type === 'symmetric' ? '对称加密' : '非对称加密';
                        const categoryText = algorithm.category === 'international' ? '国际标准' : '国密标准';
                        const statusClass = algorithm.status === 'active' ? 'badge-active' : 'badge-inactive';
                        const statusText = algorithm.status === 'active' ? '启用' : '禁用';
                        
                        row.innerHTML = `
                            <td class="py-3 px-4">${algorithm.name}</td>
                            <td class="py-3 px-4">${typeText}</td>
                            <td class="py-3 px-4">${categoryText}</td>
                            <td class="py-3 px-4">${algorithm.defaultLength}</td>
                            <td class="py-3 px-4">${algorithm.supportedLengths.join(', ')}</td>
                            <td class="py-3 px-4">
                                <span class="inline-block px-2 py-1 rounded-full text-xs font-medium ${statusClass}">${statusText}</span>
                            </td>
                            <td class="py-3 px-4">
                                <div class="flex gap-2">
                                    <button onclick="openAlgorithmDetail('edit', '${algorithm.id}')" class="text-blue-600 hover:text-blue-800 p-1 rounded-full hover:bg-blue-50 transition-colors" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button onclick="toggleAlgorithmStatus('${algorithm.id}')" class="text-gray-600 hover:text-gray-800 p-1 rounded-full hover:bg-gray-50 transition-colors" title="${algorithm.status === 'active' ? '禁用' : '启用'}">
                                        <i class="fas fa-${algorithm.status === 'active' ? 'eye-slash' : 'eye'}"></i>
                                    </button>
                                </div>
                            </td>
                        `;
                        tbody.appendChild(row);
                    });
                }
            });
        }
        
        // 生成唯一ID
        function generateId(prefix = '') {
            return `${prefix}-${Date.now().toString(36)}${Math.random().toString(36).substr(2, 5)}`.substring(0, 10);
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 延迟加载以展示动画效果
            setTimeout(() => {
                showLoading();
                initAlgorithmData();
                loadAlgorithms();
                setupSearch();
                hideLoading();
            }, 100);
        });
        
        // 点击模态框外部关闭
        document.addEventListener('click', (e) => {
            const modal = document.getElementById('algorithmDetailModal');
            if (e.target === modal && !modal.classList.contains('hidden')) {
                closeAlgorithmDetailModal();
            }
        });
        
        // ESC键关闭模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeAlgorithmDetailModal();
            }
        });
    </script>
</body>
</html>